<template>
	<view class="resourceSetting">
		<u-navbar class="navbarClassHeight" safeAreaInsetTop fixed placeholder bgColor='#3c9cff' leftIconColor='#fff'
			title="房源统计" autoBack>
		</u-navbar>
		<view class="charts-box">
			<view class="charts-content">
				<view class="top u-border-bottom">
					<view class="content">
						<image src="/static/tabbar/tb_icon_mine.png"></image>
						<text class="u-line-1">哥伦布时代广场</text>
					</view>

					<u-icon name="photo"></u-icon>
				</view>
				<view class="center">
					<u-tabs :list="list1" @click="clickFirst"></u-tabs>
					<u-icon class='ulIcon' name='question-circle'></u-icon>
				</view>
				<view class="centerScroll">
					<scroll-view scroll-y :style="{'height':navTopHeight +'px'}">
						<view class="bottom">
							<u-row class="rowClass u-border-bottom">
								<u-col span="4" justify='center' align='center' class="colClass">
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
								<u-col span="4" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总面积(万㎡)" class="text2"></u--text>
								</u-col>
								<u-col span="4" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
							</u-row>
							<view class="top">
								<view class="content">
									<image src="/static/tabbar/tb_icon_mine.png"></image>
									<text class="u-line-1">楼栋</text>
								</view>
							</view>
							<u-row class="rowClass2 u-border-bottom">
								<u-col span="3" justify='center' align='center' class="colClass">
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总面积(万㎡)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
							</u-row>
					
							<view class="top">
								<view class="content">
									<image src="/static/tabbar/tb_icon_mine.png"></image>
									<text class="u-line-1">楼栋</text>
								</view>
							</view>
							<u-row class="rowClass2 u-border-bottom">
								<u-col span="3" justify='center' align='center' class="colClass">
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总面积(万㎡)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
							</u-row>
					
					
							<view class="top">
								<view class="content">
									<image src="/static/tabbar/tb_icon_mine.png"></image>
									<text class="u-line-1">楼栋</text>
								</view>
							</view>
							<u-row class="rowClass2 u-border-bottom">
								<u-col span="3" justify='center' align='center' class="colClass">
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总面积(万㎡)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
							</u-row>
					
					
							<view class="top">
								<view class="content">
									<image src="/static/tabbar/tb_icon_mine.png"></image>
									<text class="u-line-1">楼栋</text>
								</view>
							</view>
							<u-row class="rowClass2">
								<u-col span="3" justify='center' align='center' class="colClass">
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总面积(万㎡)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
								<u-col span="3" justify='center' align='center'>
									<u--text text="52" class="text1" margin='0 0 5rpx 0'></u--text>
									<u--text text="总套数(套)" class="text2"></u--text>
								</u-col>
							</u-row>
					
					
					
						</view>
					</scroll-view>
				</view>
				



			</view>



		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTopHeight: 100,
				list1: [{
					name: "未售（100%）"
				}, {
					name: "已售（0%）"
				}]

			}
		},

		onLoad() {

		},

		onReady() {

			let _this = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					const query = uni.createSelectorQuery().in(_this);
				
					query.select('.centerScroll').boundingClientRect(function(
						data) { // data - 各种参数
						console.log(res.windowHeight,data.top)
						_this.navTopHeight = res.windowHeight  - data.top - 20 // 到屏幕顶部的距离

					}).exec()



				}
			})


		},
		methods: {
			clickFirst() {

			}


		}
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		padding: 20rpx 20rpx 0px;

		.charts-content {
		
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				padding: 0 20rpx;
				background-color: #fff;

				.content {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 30rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}


			}

			.center {
				background-color: #fff;
				margin-bottom: 20rpx;
				position: relative;
				.ulIcon{
					position: absolute;
					right: 20rpx;
					top: 15px;
				}
				
			}

			.bottom {
				background-color: #fff;

				.rowClass {
					padding: 30rpx 0;
				}

				.rowClass2 {
					padding: 10rpx 0 40rpx;
				}
			}

		}

	}
</style>
